<template>
  <el-dialog :title="isEdit ? '编辑用户' : '添加用户'" :visible.sync="visible" :close-on-click-modal="false"
    :before-close="handleCloseDialog" width="680px">
    <el-form :model="dataObject" :rules="rules" ref="adminForm" label-width="100px" size="small">
      <el-form-item label="帐号：" prop="username">
        <el-input v-model="dataObject.username" :disabled="isEdit" placeholder="请输入帐号" clearable></el-input>
      </el-form-item>
      <el-form-item label="姓名：" prop="nickName">
        <el-input v-model="dataObject.nickName" placeholder="请输入姓名" clearable></el-input>
      </el-form-item>
      <el-form-item label="邮箱：">
        <el-input v-model="dataObject.email" placeholder="请输入邮箱" clearable></el-input>
      </el-form-item>
      <el-form-item label="密码：" prop="password">
        <el-input v-model="dataObject.password" placeholder="请输入密码" type="password" clearable></el-input>
      </el-form-item>
      <el-form-item label="备注：">
        <el-input v-model="dataObject.note" placeholder="请输入备注"  type="textarea" :rows="5" clearable></el-input>
      </el-form-item>
      <el-form-item label="是否启用：">
        <el-radio-group v-model="dataObject.status" placeholder="请选择是否启用">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleConfirmDialog('adminForm')" size="mini">确 定</el-button>
      <el-button @click="handleCloseDialog" size="mini">取 消</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { createAdmin, updateAdmin, getAdmin } from '@/api/login';
import { createNamespacedHelpers } from "vuex";

const { mapState } = createNamespacedHelpers("umsAdmin");

const defaultObject = {
  username: "",
  nickName: "",
  email: '',
  password: "",
  note: '',
  status: 1
};

export default {
  name: "editObjDialog",
  data() {
    return {
      loading: false,
      dataObject: Object.assign({}, defaultObject)
    };
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    isEdit: {
      type: Boolean,
      default: false
    },
    dataId: {
      type: Number,
      default: null
    }
  },
  computed: {
    ...mapState({
      rules: state => state.rules
    })
  },
  mounted() {
    if (this.isEdit) {
      getAdmin(this.dataId).then(response => {
        this.dataObject = response.data;
      });
    } else {
      this.dataObject = Object.assign({}, defaultObject);
    }
  },
  methods: {
    handleCloseDialog() {
      this.$emit("update:visible");
    },
    handleConfirmDialog(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$confirm("是否提交数据", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            if (this.isEdit) {
              updateAdmin(this.dataId, this.dataObject).then(response => {
                this.resetForm(formName);
                this.$message({
                  message: "修改成功",
                  type: "success",
                  duration: 1000
                });
                this.$emit("handle-confirm");
              });
            } else {
              createAdmin(this.dataObject).then(response => {
                this.resetForm(formName);
                this.$message({
                  message: "提交成功",
                  type: "success",
                  duration: 1000
                });
                this.$emit("handle-confirm");
              });
            }
          });
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.dataObject = Object.assign({}, defaultObject);
    }
  }
};
</script>
<style scoped>
.user-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap
}

.left-box {
  border: 1px solid #DCDFE6;
  padding: 4px;
}

.right-box {
  border: 1px solid #DCDFE6;
  padding: 4px;
  margin-left: 8px;
  flex-grow: 1;
}

.ritht-box-top {
  border: 1px solid #DCDFE6;
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
  justify-items: center;
  padding: 0px 6px;
  border-radius: 4px;
}

.ritht-box-top span {
  font-weight: 100;
  line-height: 26px;
}

.ritht-box-content {
  height: 400px;
  overflow: auto;
  border: 1px solid #DCDFE6;
  margin-top: 4px;
}

.tree-list {
  height: 400px;
  overflow: auto;
  border: 1px solid #DCDFE6;
  margin-top: 4px;
}

.tag-item {
  margin: 4px 0px 0px 4px;

}
</style>